<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 
        要移值到其他页面需要带上
        1.css:
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
            <link rel="stylesheet" href="music.css">
            在 music.css文件中修改 .music-container{...}即可，详见music.css中的注释
        2.html:
            <div class="music-container" id="music-container">....</div>
        3.js:
            <script src="music.js"></script>
     -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/Main-style.css">
    <link rel="stylesheet" href="/static/css/music.css">
    <title>“邮”声</title>
</head>
<script type="text/javascript">
    function get_music(){
        
    }
</script>
<body>
    <div class="background">
        <img src="/media/img/background.jpg">
    </div>
    <div class="header">
        <div class="header-background">
            <img src="/media/img/header-background.jpg">
        </div>
        <div class="logo">
            <img src="/media/img/logo.jpg">
            <p>"邮"声</p>
        </div>
        <div class="user">
            <a href="#"><img src="/media/img/person.png" style="vertical-align: middle;"></a>
            <a href="#"><div id="circle"></div></a>
        </div>  
    </div>

    <div class="climate">
        <div class="climate-background">
            <img src="/media/img/climate-background1.jpg">
        </div>
        <div class="climate-title">
            <p>当前天气情况</p>
        </div>
        <div class="pic">
            <img src={{weather_background}}>
        </div>
        <div class="specific-climate">
            <p class="temperature">{{climate.low_temperature}}</p>
            <p class="weather">{{climate.weather}}</p>
            <p class="humidity">当前湿度：{{climate.humidity}}</p>
            <p class="PM25">当前PM2.5指数：{{climate.pm}}</p>
            <p class="wind">风向：{{climate.wind}}</p>
            
        </div>
    </div>
    
    <div class="music-container" id="music-container">
        <div class="music-title">
            <h2>现在宜听曲目</h2>
        </div>
        <!-- 音乐信息 -->
        <div class="music-info">
            <!-- 音乐标题 -->
            <h4 id="title"></h4>
            <!-- 音乐播放进度条 -->
            <div class="progress-container" id="progress-container">
                <div class="progress" id="progress"></div>
            </div>
        </div>

        <!-- 默认第一首音乐 -->
        <audio src="/media/music/打上花火.mp3" id="audio"></audio>

        <!-- 音乐封面 -->
        <div class="img-container">
            <img src="/media/img/打上花火.jpg" alt="music-cover" id="music-cover">
        </div>
        <!-- 播放控制 -->
        <div class="navigation">
            <button id="prev" class="action-btn">
                <i class="fas fa-backward"></i>
            </button>
            <button id="play" class="action-btn action-btn-big">
                <i class="fas fa-play"></i>
            </button>
            <button id="next" class="action-btn">
                <i class="fas fa-forward"></i>
            </button>
        </div>
    </div>
    

    <div class="more-title">
        <h2>更多音乐推荐</h2>
    </div>
    <div class="musics">
        <!--左数第一个音乐-->
        <a href="#">
            <div class="music1">
                <img src="/media/img/daoxiang.jpg">
                <div class="musictext">
                    <h2>稻香</h2>
                    <p>演唱者：周杰伦</p>
                </div>
            </div>
        </a>

        <!--左数第二个音乐-->
        <a href="#">
            <div class="music1">
                <img src="/media/img/peiniduguomanchangsuiyue.jpg">
                <div class="musictext">
                    <h2>陪你度过漫长岁月</h2>
                    <p>演唱者：陈奕迅</p>
                </div>
            </div>
        </a>

        <!--左数第三个音乐-->
        <a href="#">
            <div class="music1">
                <img src="/media/img/jie.jpg">
                <div class="musictext">
                    <h2>借</h2>
                    <p>演唱者：毛不易</p>
                </div>
            </div>
        </a>
    </div>
    <div class="copyright">
        <p>&copy;“邮”声工作室</p>
    </div>

</body>
<script src="/static/js/music.js"></script>

</html>